<template>
	<div class="content">
		<p style="height: 20rpx;"></p>
		<div class="list_box">
			<div class="list">
				<div class="tx">
					<img :src="msg.avatar?msg.avatar:'/static/mr_tx.png'" alt="">
					<div class="name_box">
						<p class="name">{{msg.memberUserName}}</p>
						<p class="time">{{msg.createTime}}</p>
					</div>
				</div>
				<div class="nr">
					{{msg.content}}
				</div>
				<div @click.stop="" class="img_list" v-if="msg.pictureList && msg.pictureList.length">
					<p @click="previewImg(msg.pictureList,child)" class="img" v-for="(child,i) in msg.pictureList">
						<u-image mode="widthFit" width="220rpx" height="220rpx" :src="child"  :lazy-load="true"></u-image>
					</p>
				</div>
				<div class="anniu">
					<p @click.stop="">
						<button class="anniu" open-type="share">
							<img src="/static/exposure-icon1.png" alt="">去分享
						</button>
					</p>
					<p><img src="/static/exposure-icon2.png" alt="">{{msg.commentsTotal}}</p>
					<p @click="dianzan1" :style="{color:msg.isLike?'#FF4441':'#999999'}">
						<img v-if="!msg.isLike" src="/static/exposure-icon3.png" alt="">
						<img v-else src="/static/exposure-icon3hover.png" alt="">
						{{msg.likeNum?msg.likeNum:'0'}}
					</p>
				</div>
			</div>
		</div>
		<p class="tips" @click="toGuarantee">
			<img src="/static/dun_icon.png" alt="">
			怕定金被骗，找平台担保，0服务费！ 去了解》
		</p>

		<div class="pl_box">
			<div class="title_box">
				<p>评论</p>
			</div>
			<block v-if="plList.length">
				<div class="list" v-for="(item,index) in plList" :key="index">
					<img @click="changeUser(item)" class="tx" :src="item.commentAvatar?item.commentAvatar:'/static/mr_tx.png'" alt="">
					<div class="msg1">
						<p class="name" @click="changeUser(item)">{{item.commentUserName}}</p>
						<p class="text" @click="changeUser(item)">{{item.content}} <span @click="delComment(item.id)" v-if="item.commentUserId == userId">删除</span></p>
						<div class="time_box">
							<p class="time">{{item.createTime}}</p>
							<div class="pl">
								<!-- <p><img src="/static/exposure-icon2.png" alt="">34</p> -->
								<p @click="dianzan(item)" :style="{color:item.isLike?'#FF4441':'#999999'}">
									<img v-if="!item.isLike" src="/static/exposure-icon3.png" alt="">
									<img v-else src="/static/exposure-icon3hover.png" alt="">
									{{item.likeNum?item.likeNum:0}}
								</p>
							</div>
						</div>

						<div class="two_box" v-for="(child,i) in item.children" :key="i">
							<img @click="changeUser(child)" class="tx" :src="child.commentAvatar?child.commentAvatar:'/static/mr_tx.png'" alt="">
							<div class="msg1">
								<p class="name" @click="changeUser(child)">{{child.commentUserName}}</p>
								<p class="text" @click="changeUser(child)">{{child.content}} <span @click="delComment(child.id)" v-if="child.commentUserId == userId">删除</span></p>
								<div class="time_box">
									<p class="time">{{child.createTime}}</p>
									<div class="pl">
										<!-- <p><img src="/static/exposure-icon2.png" alt="">34</p> -->
										<p @click="dianzan(child)" :style="{color:child.isLike?'#FF4441':'#999999'}">
											<img v-if="!child.isLike" src="/static/exposure-icon3.png" alt="">
											<img v-else src="/static/exposure-icon3hover.png" alt="">
											{{child.likeNum?child.likeNum:0}}
										</p>
									</div>
								</div>

								<div class="three_box" v-for="(child_three,a) in child.children" :key="a">
									<img class="tx" :src="child_three.commentAvatar?child_three.commentAvatar:'/static/mr_tx.png'" alt="">
									<div class="msg1">
										<p class="name">{{child_three.commentUserName}}</p>
										<p class="text">{{child_three.content}} <span @click="delComment(child_three.id)" v-if="child_three.commentUserId == userId">删除</span></p>
										<div class="time_box">
											<p class="time">{{child_three.createTime}}</p>
											<div class="pl">
												<!-- <p><img src="/static/exposure-icon2.png" alt="">34</p> -->
												<p @click="dianzan(child_three)" :style="{color:child_three.isLike?'#FF4441':'#999999'}">
													<img v-if="!child_three.isLike" src="/static/exposure-icon3.png" alt="">
													<img v-else src="/static/exposure-icon3hover.png" alt="">
													{{child_three.likeNum?child_three.likeNum:0}}
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</block>


			<div class="no_data" v-else>
				<img src="/static/no-data.png" alt="">
				<p>暂无评论</p>
			</div>
		
		</div>

		<div class="input_box">
			<div class="box">
				<div class="sr_input" ref="container">
					<u--textarea :focus="isFocus" v-model="param.content" cursorSpacing="20" :showConfirmBar="false" height="19px" :placeholder="placeholderText" autoHeight ></u--textarea>
					<p @click="sendOut">发送</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import api from '@/api';
	import { Debounce,getTimeUtils1 } from '@/utils/utils.js'
	export default {
		data() {
			return {
				msg:{},
				param:{
					content:'',// 评论内容
					messageId:'',// 评论消息id
					circleId:'',// 圈消息ID
					messageUserId:'',// 消息人ID
					messageUserName:'',// 消息人名称
					messageAvatar:'',// 消息人头像
				},
				param1:{
					pageNo:1,
					pageSize:10,
				},
				plList:[],
				placeholderText:'评论区禁广告，违者拉黑！',
				isFocus:false,
				id:'',
				shareUserId:''
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token,
			})
		},
		onShow(){
		},
		onLoad(options){
			if(options.shareUserId){
				this.shareUserId = options.shareUserId
			}
			this.id = options.id
			this.getDetail(options.id)
			this.getPlList(options.id)
		},
		methods: {

			// 外层点赞
			dianzan1(){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(this.msg.isLike){
					api.user.message_likes({messageId:this.msg.id}).then(res=>{
						if(res.code == 200){
							this.msg.isLike = false
							this.msg.likeNum--
						}
					})
				}else{
					api.user.message_likes({messageId:this.msg.id}).then(res=>{
						if(res.code == 200){
							this.msg.isLike = true
							this.msg.likeNum++
						}
					})
				}
				
			},

			// 点赞
			dianzan:Debounce(async function (item) {
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				let data = {
					commentId:item.id,
					commentUserId:item.commentUserId,
					isLike:item.isLike?false:true,
					circleId:item.circleId
				}
				await api.user.like_likes(data).then(res=>{
					if(res.code == 200){
						this.getPlList(this.id)
					}
				})
				console.log(item)
			},300),

			// 跳转担保交易
			toGuarantee(){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				uni.navigateTo({
					url: '/pages/guarantee/index'
				});
			},

			// 删除评论
			delComment(id){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				uni.showModal({
				title: '提示',
				content: '确定删除该评论？',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确定',
					success:(res)=>{
						if (res.confirm) {
							api.user.comment_delete(id).then(res=>{
								this.getPlList(this.id)
								this.getDetail(this.id)
							})
						} 
					},
				});
			},

			previewImg(imgList,imgurl) {
				uni.previewImage({
				current: imgurl, // 当前显示图片的http链接
				urls: imgList // 需要预览的图片http链接列表
				});
			},

			// 获取详情
			getDetail(id){
				api.user.get_message_detail({id}).then(res=>{
					if(res.code == 200){
						if(res.data.pictureList){
							res.data.pictureList = res.data.pictureList.split(",");
						}
						res.data.createTime = getTimeUtils1(res.data.createTime)
						this.msg = res.data

						this.param.circleId = res.data.id
					}
				})
			},

			// 获取评论列表
			getPlList(circleId){
				this.param1.circleId = circleId
				api.user.comment_get_detail(this.param1).then(res=>{
					if(res.code == 200){
						this.plList = this.processData(res.data.list)
						console.log(this.plList)
					}
				})
			},

			// 递归-格式化时间
			processData(items) {
				return items.map(item => {
					item.createTime = getTimeUtils1(item.createTime)
					if (item.children && item.children.length > 0) {
						item.children = this.processData(item.children);
					}
					return item;
				});
			},

			// 选择用户
			changeUser(item){
				console.log(item)
				this.placeholderText = `回复：${item.commentUserName}`
				this.param.messageId = item.id
				this.param.messageUserId = item.commentUserId
				this.param.messageUserName = item.commentUserName
				this.param.messageAvatar = item.commentAvatar
				this.param.id = item.id
				this.isFocus = true
			},

			// 发送消息
			sendOut(){
				console.log(this.param)
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(!this.param.content){
					this.$toast('请输入内容~')
					return
				}
				this.$showLoading('发送中...')
				api.user.comment_create(this.param).then(res=>{
					if(res.code == 200){
						uni.hideLoading();
						this.param.content = ''
						this.getPlList(this.param.circleId)
						this.getDetail(this.id)
						this.$toast('发送成功～')
					}else{
						this.$toast(res.msg)
					}
				})
				
			}
		},
		onShareAppMessage() {
			return {
				title: '免费用万人接单群',
				path: `/pages/exposure/index?shareUserId=${this.userId}`
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		.list_box{
			.list{
				padding:30rpx 30rpx 0 30rpx;
				background: #fff;
				margin-bottom:20rpx;
				.tx{
					display: flex;
					img{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right:20rpx;
					}
					.name_box{
						display: flex;
						flex-direction:column;
						justify-content: space-around;
						.name{
							font-size: 30rpx;
							color: #333333;
						}
						.time{
							color: #999999;
							font-size: 26rpx;
						}
					}
				}
				.nr{
					padding:24rpx 0;
					font-size:28rpx;
					color:#333;
					line-height: 46rpx;
				}
				.img_list{
					padding-bottom:10rpx;
					.img{
						width: 110px;
						height: 110px;
						margin:0 14rpx 14rpx 0;
						display: inline-block;
						&:nth-child(3n){
							margin-right:0;
						}
					}
				}
				.anniu{
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 76rpx;
					border-top:1px solid #EEEEEE;
					font-size: 26rpx;
					color: #999999;
					p{
						display: flex;
						align-items: center;
						button{
							background: none;
							border:none;
							padding:none;
							&::after{
								border:none;
							}
						}
					}
					img{
						width: 36rpx;
						height: 36rpx;
						margin-right:6rpx;
					}
				}
			}
		}
		.tips{
			height: 72rpx;
			background: #FF4441;
			display: flex;
			align-items: center;
			padding:0 28rpx;
			font-size:28rpx;
			color:#fff;
			margin-bottom:20rpx;
			img{
				width: 36rpx;
				height: 36rpx;
				margin-right:12rpx;
			}
		}
		.pl_box{
			padding:0 30rpx;
			margin-top:20rpx;
			background: #fff;
			.title_box{
				display: flex;
				align-items: center;
				color:#333333;
				font-size: 30rpx;
				font-weight: 500;
				height: 80rpx;
			}
			.list{
				display: flex;
				padding:40rpx 0;
				border-top:1px solid #EEEEEE;
				.tx{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.msg1{
					flex: 1;
					margin-left:16rpx;
					.name{
						font-size: 28rpx;
						color: #999999;
					}
					.text{
						color: #3D3D3D;
						font-size: 32rpx;
						margin:10rpx 0 20rpx 0;
						span{
							color:#999999;
							margin-left:10rpx;
							font-size:30rpx;
						}
					}
					.time_box{
						display: flex;
						justify-content: space-between;
						.time{
							color: #999999;
							font-size:24rpx;
						}
						.pl{
							display: flex;
							p{
								display: flex;
								align-items: center;
								font-size: 26rpx;
								color: #999999;
								margin-left: 30rpx;
								img{
									width: 36rpx;
									height: 36rpx;
									margin-right:6rpx;
								}
							}
						}
					}
					
				}
				.two_box{
					display: flex;
					margin:50rpx 0;
					&:last-child{
						margin-bottom:0;
						.time_box{
							border-bottom:none;
							padding-bottom:0;
						}
					}
					.tx{
						width: 40rpx;
						height: 40rpx;
					}
					.time_box{
						border-bottom:1px solid #EEEEEE;
						padding-bottom:20rpx;
					}
				}
				.three_box{
					@extend .two_box;
				}
			}
		}
		.input_box{
			width: 100%;
			min-height: 160rpx;
			.box{
				width: 94%;
				position: fixed;
				bottom:0;
				left: 0;
				padding:24rpx;
				z-index: 10;
				background: #fff;
				box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.3);
				.sr_input{
					display: flex;
					align-items: center;
					justify-content:  space-between;
					/deep/ .u-textarea{
						width: 72%;
						background: #F1F1F1;
						padding:24rpx;
						border-radius: 100rpx;
						font-size:28rpx;
						flex: inherit;
						border:none;
						-webkit-appearance: none;
						color: #000;
					}
					p{
						width: 108rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #23AC39;
						border-radius: 10rpx;
						font-size:28rpx;
						color:#fff;
						text-align: center;
					}
					img{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.no_data{
			text-align: center;
			padding-bottom:50rpx;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
